<template>
  <div id="app">
    <my-lists @onLoad="onLoad" :pullDataLists="pullDataLists"></my-lists>
  </div>
</template>

<script>
import myLists from '@/components/Mylists.vue'
import axios from 'axios'
export default {
  name: 'App',
  components: {
    myLists
  },
  data () {
    return {
      dataLists: [],
      pullDataLists: []
    }
  },
  created () {
    this.getDataLists()
  },
  methods: {
    async getDataLists () {
      try {
        const res = await axios({
          method: 'get',
          url: '/data/users.json'
        })
        this.dataLists = res.data
        this.pullDataLists = this.dataLists.splice(0, 15)
      } catch (error) {
        console.log(error.respose)
      }
    },
    onLoad () {
      console.log(1112312321)
      setTimeout(() => {
        this.pullDataLists = this.dataLists.splice(0, 15)
      }, 2000)
    }
  }
}
</script>

<style lang="less">
</style>
